import React from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';
import { apiPrefix } from 'shared/api';

class Roster extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      roster: [],
    };
  }
  componentDidMount() {
    const api = `${apiPrefix}api/v1/roster/dynamics`;
    axios.get(api)
      .then((response) => {
        console.log(response.data.data);
        this.setState({ roster: response.data.data });
      });
  }
  deletRost=(value) => {
    console.log(value);
    const api = `${apiPrefix}api/v1/roster/type?id=${value}`;
    axios.delete(api)
      .then((response) => {
        console.log(response.data.msg);
        this.componentDidMount();
      });
  }
  render() {
    const { roster } = this.state;
    console.log(roster);
    return (
      <div className="content">
        <div>
          <h3>
          花名册属性管理
            <Link to="/system/roster/rosterForm" className="addButton" style={{ float: 'right' }}>添加</Link>
          </h3>
          <table style={{
            width: '99%',
          }}
          >
            <thead>
              <tr>
                <th className="w50">序号</th>
                <th className="w120">名称</th>
                <th className="w120">必填</th>
                <th className="w120">类型</th>
                <th className="">选项值</th>
                <th className="w120" />
              </tr>
            </thead>
            <tbody>
              {
              roster.map((value, index) => (
                <tr key={index}>
                  <td>{index + 1}</td>
                  <td>{value.name}</td>
                  <td>{value.isrequired ? '是' : '否'}</td>
                  <td>{value.field_type === 'text' && '单行文本' || value.field_type === 'select' && '下拉选择' || value.field_type === 'date' && '日期选择' || value.field_type === 'textarea' && '多行文本'}</td>
                  <td>{value.options.map(val => <span>{val.name}、</span>)}</td>
                  <td>
                    <button className="compile-button">
                      <Link to={`/system/roster/rosterForm/${value.id}`}>编辑</Link>
                    </button>
                    <button className="delet-button" onClick={() => this.deletRost(value.id)}>
                       删除
                    </button>
                  </td>
                </tr>
                ))
              }
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

export default Roster;
